<html>
    <head>
        <script src="common/vue/vue.js"></script>
        <script src="common/elementUI/index.js"></script>
        <link rel="stylesheet" href="common/elementUI/index.css">
        <script src="common/axios/axios.min.js"></script>
        <script src="js/websocket.js"></script>
        <script src="js/server.js"></script>
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    </head>
    <body>
        <div id="base-app">
            <div>
                <span>websocketStatus:{{message}}</span><br>
                <input type="text" v-model="inputMsg">
                <input type="button" value="send" @click="sendMsgToSvrByWebsocket">
            </div>
            <div style="width: 50%;float: left;">
                <template>
                    <el-table
                            :data="stockBasicArray"
                            stripe
                            style="width: 100%">
                        <el-table-column
                                prop="name"
                                label="公司名称"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="tsCode"
                                label="代号"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="listDate"
                                label="上市日期"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                label="操作"
                                width="100">
                            <template slot-scope="scope">
                                <el-button @click="orderTrade(scope.row)" type="text" size="small">订阅</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </div>
            <div style="width: 50%;float: left;">
                <ul>
                    <li v-for="item in stockTradeArray" >
                        {{ item }}
                    </li>
                </ul>
            </div>
        </div>
    </body>
    <script>
        var app = new Vue({
            el: '#base-app',
            data: {
                stockBasicArray:[],
                stockTradeArray:[],
                message: "测试内容",
                inputMsg: '{uri:"/websocketService/testWebsocket",params:{"msg":"test"}}'
            },
            methods:{
                sendMsgToSvrByWebsocket:function(){
                    window.send(this.inputMsg);
                },
                getAllStockBasicInfo:function () {
                    let _self = this;
                    requestServer.getAllStockBasicInfo().then(function (res) {
                        _self.stockBasicArray = res;
                        console.log(_self.stockBasicArray);
                    });
                },
                orderTrade:function (row) {
                    var msg = {};
                    msg.uri = "/websocketService/orderStock";
                    msg.params = {};
                    msg.params.tscode = row.tsCode;
                    window.send(JSON.stringify(msg));
                }
            },
            mounted:function () {
                this.getAllStockBasicInfo();
            }
        })
    </script>
</html>